<!--
 * @description: 
 * @Date: 2022-10-19 13:26:15
 * @LastEditTime: 2022-11-10 16:57:29
-->
<template>
  <div class="linkstoreAdmin bg-white p-4 rounded-lg">
    <BaseForm :formConfig="formConfig" @submitForm="search">
      <template #control>
        <el-button type="danger" @click="add">添加新标签</el-button>
        <el-button type="warning" @click="delAll">批量删除</el-button>
      </template>
    </BaseForm>
    <BaseTable
      class="mt-4"
      :tableList="TbData"
      :page="page"
      :tableConfig="TbConfig"
    ></BaseTable>
    <el-drawer v-model="show" title="编辑标签" size="400px">
      <el-form v-model="edit" :label-position="'top'">
        <el-form-item label="名称">
          <el-input v-model="edit.name" placeholder="请输入网站title"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-input v-model="edit.src" placeholder="标签图标地址">
            <template #append>
              <el-upload
                class="upload-demo"
                :show-file-list="false"
                :on-success="upimg"
                :action="store.state.site.upload"
              >
                <el-button type="primary">上传</el-button>
              </el-upload>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="域名">
          <el-input v-model="edit.domain" placeholder="请输入域名"></el-input>
        </el-form-item>
        <el-form-item label="网址">
          <el-input v-model="edit.url" placeholder="请输入网址,请携带http协议"></el-input>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-select v-model="edit.size" class="w-full">
            <el-option label="1x1" value="1x1"></el-option>
            <el-option label="2x2" value="2x2"></el-option>
            <el-option label="2x4" value="2x4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="edit.area"
            multiple
            placeholder="分类选择可多选"
            class="w-full"
          >
            <el-option
              v-for="item in [
                '系统',
                '推荐',
                '在线工具',
                '资讯',
                '开发',
                '设计',
                '效率',
                '娱乐',
                '社交',
                '阅读',
                '金融',
                '综合',
              ]"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="edit.tips" placeholder="请简单介绍一下"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="edit.type" class="w-full">
            <el-option label="icon" value="icon"></el-option>
            <el-option label="component" value="component"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排行">
          <el-input-number
            v-model="edit.hot"
            class="w-full"
            placeholder="数值越高排名越高"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="w-full" @click="save">保存</el-button>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref } from "vue";
import BaseTable from "../../components/baseTable/index.vue";
import BaseForm from "../../components/baseForm/index.vue";
import ajax from "../../util/ajax";
import sm from "../../util/sm2";
import redirectUrl from "../../util/href";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
const store = useStore();
const show = ref(false);
const edit = ref({});
const add = () => {
  edit.value = {};
  show.value = true;
};
let delList = [];
const delAll = () => {
  if (delList.length <= 0) {
    return;
  }
  ElMessageBox.confirm("是否批量删除", "删除提示")
    .then((_) => {
      ajax({
        url: "/linkStore/del",
        method: "post",
        data: { ids: delList },
      }).then((el) => {
        ElMessage.success(el.msg);
        getData();
      });
    })
    .catch();
};
const upimg = (data) => {
  if (data.code == 1) {
    edit.value.src = data.data.url;
  }
};
const save = () => {
  edit.value.area = edit.value.area.join(",");
  ajax({
    url: "/linkStore/add",
    method: "post",
    data: {
      form: edit.value,
    },
  }).then((el) => {
    ElMessage.success(el.msg);
    show.value = false;
    getData();
  });
};
const formConfig = [
  {
    label: "名称搜索",
    alias: "name",
    type: "input",
    placeholder: "请输入名称",
  },
  {
    label: "类型",
    alias: "area",
    type: "input",
    placeholder: "请输入类型",
  },
];
let q = {};
const search = (data) => {
  q = data;
  getData();
};
const page = ref({
  current_page: 1,
  per_page: 50,
  total: 0,
  refresh(e) {
    Object.assign(page.value, e);
    getData();
  },
});
const TbData = ref([]);
const TbConfig = [
  {
    type: "selection",
    align: "center",
    select(row) {
      let a = [];
      row.forEach((el) => {
        a.push(el.id);
      });
      delList = a;
    },
    width: 100,
  },
  {
    prop: "id",
    name: "ID",
    align: "center",
    width: 100,
  },
  {
    prop: "name",
    name: "网站名称",
    align: "center",
    width: 200,
  },
  {
    prop: "src",
    name: "LOGO",
    type: "image",
    class: "logoiconRadius",
    align: "center",
    width: 80,
  },
  {
    prop: "url",
    name: "域名链接",
    align: "center",
    width: 260,
  },
  {
    prop: "domain",
    name: "Domain",
    align: "center",
    width: 260,
  },
  {
    prop: "type",
    name: "类型",
    align: "center",
    width: 100,
  },
  {
    prop: "size",
    name: "尺寸",
    align: "center",
    width: 60,
  },
  {
    prop: "area",
    name: "分类",
    align: "center",
  },
  {
    prop: "tips",
    name: "简介",
    align: "center",
    width: 300,
  },
  {
    prop: "create_time",
    type: "time",
    align: "center",
    name: "创建时间",
    width: 200,
  },
  {
    type: "control",
    name: "操作",
    align: "center",
    width: 150,
    button: [
      {
        typeof: "primary",
        size: "small",
        text: "编辑",
        click(e) {
          edit.value = Object.assign({}, e);
          edit.value.area = edit.value.area.split(",");
          show.value = true;
        },
      },
    ],
  },
];
const getData = () => {
  ajax({
    url: "/LinkStore/list",
    method: "post",
    params: {
      ...q,
      page: page.value.current_page,
      limit: page.value.per_page,
    },
  }).then((el) => {
    TbData.value = el.data.data;
    Object.assign(page.value, el.data);
  });
};
getData();
</script>
<style lang="less">
.logoiconRadius {
  > .table-img {
    > img {
      height: 55px;
      width: 55px;
      border-radius: 10px;
      border: 2px solid rgb(238, 238, 238);
    }
  }
}
</style>
